<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			div是一个块级元素，块级元素的内容自动地开始一个新行，这也是div元素唯一的固有样式。如果需要给div元素增加样式，可以
			给div元素设置class或id属性，然后通过类选择器或id选择器设置样式
			浮动属性清除：clear：both；
		-->
		<style type="text/css">
			body{
			margin: 0px;
			padding: 0px;
		}
		div{
			font: bold 32px 隶书;
			color: red;
			text-align: left;
			text-decoration: underline;
		}
		#container{
			width: 800px;
			padding: 5px;
		}
		#header{
			width: 100%;
			height: 80px;
			background: #DDDDDD;
		}
		#content{
			width: 100%;
			height: 200px;
			background: #BBBBBB;
		}
		#footer{
			width: 100%;
			height: 80px;
			background: #999999;
		}
		</style>
		
	</head>
	<body>
		<div id="container">
			<div id="header">header</div>
			<div id="content">content</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>
